<template>
    <div class="details">
        <div class="details" v-if="Lists">
            <div class="container">
            <div class="toplogo" ref="toplogo">
                <button class="comebreak" @click="$router.go(-1)">
                    <div class="left iconfont icon-arrow-left-bold"></div>
                </button>
                <div class="left iconfont icon-elipsis" @click="comment1">
  
                </div>
            </div>
            <div class="newstitle">
                <!-- 图知道|进返京后及解除隔离后：为什么做好“七天三不”很重要 -->
                <!-- {{Lists[index]}} -->
                {{detailspage.title}}
            </div>
            <div class="sublittle">
                <div class="top">
                    <div class="ticket">原创</div>
                    <div class="appname" style="margin-left:8px;">{{detailspage.name}}</div>
                    <span>|</span>
                    <div class="time">2022-10-11 09:03</div>
                </div>
                <div class="author">
                    作者：胡宁 程璨
                </div>
            </div>
            <div class="more">
                <p>进入<span>综合</span>频道阅读更多内容</p>
                <div class="morebox" @click="$router.push('/composite')">更多</div>
            </div>
            <div class="content clearfix">
                <p style="margin-bottom: 20px;">{{detailspage.content}}</p>
                <div class="imgbox">
                    <img class="auto-img" :src="detailspage.img" alt="">
                </div>
                <div class="imgbox" v-if="'img' in detailspage">
                    <img class="auto-img" :src="detailspage.img2" alt="">
                </div>
                <div class="editor">责任编辑：六十新</div>
                <ul>
                    <li @click="wechat">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weixin"></use>
                        </svg>
                        
                    </li>
                    <li @click="pyq">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-pengyouquan"></use>
                        </svg>
                    </li>
                    <li @click="weibo">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-weibo"></use>
                        </svg>
                    </li>
                    <li @click="save">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-xiangce"></use>
                        </svg>
                    </li>
                    
                </ul>
            </div>
            <div class="linebox"></div>

            <div class="box_foot">
                <div class="titlebox">
                    <div class="icon1">
                        <img src="../assets/img/热点.png" alt="" class="auto-img">
                    </div>
                    <p>热点推荐</p>
                </div>
                <ul>
                  
                    <div v-for="(item) in Lists2" :key="item.id">
                      <router-link :to="'/details2?id='+item.id" tag="li">
                        <div class="titlebox">
                            <div class="title">{{item.title}}</div>
                            <div class="subtitle">
                                <!-- 存在video数据或者有hot数据的加上con类名 -->
                                <div :class="[{'con':item.video || item.hot}]">{{item.video}}{{item.hot}}</div>
                                <div>{{item.name}} {{item.time}}小时前</div>
                            </div>
                        </div>
                        <div class="imgbox">
                            <img :src="item.img" alt="" class="auto-img">
                        </div>
                        </router-link>
                    </div>
                  
                    
                </ul>
            </div>
            <div class="linebox"></div>
            <div class="comment" ref="comment">
                <div class="titlebox">
                    <div class="icon1">
                        <img src="../assets/img/message.png" alt="" class="auto-img">
                    </div>
                    <p>热门评论</p>
                </div>
                
                <div class="usercom">
                    <div class="userbox" v-for="(item,index) in Commont" :key="index">
                        <div class="top">
                            <div class="user" @click="tomy(item)">
                                <div class="userimg">
                                     <img :src="item.img" alt="" class="auto-img"> 
                                 </div>
                                 <p style="margin-left: 10px;">{{item.name}}</p> 
                             </div>
                             <div class="right" >
                                <div class="num">{{item.like}}</div>
                                <div class="like" @click="likes(item)">
                                    <svg class="icon" aria-hidden="true">
                                      <use xlink:href="#icon-fabulous" v-show="item.good" ></use>
                                      <use xlink:href="#icon-aixin" v-show="!item.good"></use>
                                    </svg>
                                
                                </div>
                             </div>
                        </div>
                        <div class="btm" style="margin-left: 43px;font-size: 14px;">
                            <div class="usercomment" style="margin-top:5px;">
                                {{item.content}}
                            </div>
                            <div class="reply" style="margin-top:10px;">
                                <div class="time">{{item.time}}</div>
                                <div @click="del(item.id)" class="replybox" v-show="item.name=='管理员404' && token">删除</div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="allcom"  ref="inp" @click="to_commont">
                        全部评论
                    </div>
                    
                </div>
            </div>
            
            <div class="pagebtm">
                <div class="inp" @click="commentbox" >
                  写评论
                </div>  
                <!-- 全部评论 -->
                <div class="icon-inp" @click="comment">
                  <van-badge :content="Commont.length">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon-test"></use>
                  </svg>
                  </van-badge>
                </div>
                <!-- 收藏 -->
                <div class="icon-inp " @click="Collection">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-favorite" v-show="collection"></use>
                    <use xlink:href="#icon-star__easyico" v-show="!collection"></use>
                  </svg>
                </div>
                <!-- 点赞 -->
                <div class="icon-inp" @click="Likeicon">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fabulous" v-show="likess"></use>
                    <use xlink:href="#icon-aixin" v-show="!likess"></use>
                  </svg>
                </div>
                <!-- 分享 -->
                <div class="icon-inp " @click="comment1">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-fenxiang"></use>
                  </svg>
                </div>
                
            </div>
            
        </div>
        </div>   
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          :close-on-click-overlay='true'
          
          @select="onSelect"
          />
          
        <van-popup class="commontbox" v-model="show" round position="bottom" :style="{ height: '30%' }" >
          <textarea ref="text" @keyup.enter="commontadd" rows="3" cols="20" placeholder="写下你的评论吧~回车也可以发送哦 "></textarea>
          <div class="send" @click="send">发送</div>
        </van-popup>

    </div>
</template>

<script>
import '../assets/font/iconfont.js'
import { Toast } from 'vant';
import { Dialog } from 'vant';
import { getLists,getImg} from "../api/lists.js";
import { getBanner} from "../api/banner.js";
export default {
  data() {
    return {
      Lists:null,//列表页数据
      Lists2:null,//列表页数据
      Img:null,//图片数据
      Bannerimg:null,//轮播图数据
      Commont:null,//评论数据
      showShare: false,//分享显示隐藏 
      detailspage:null,//详情页数据
      good:true,//点赞,
      collection:true,//收藏
      likess:true,//喜欢
      show:false,//底部评论弹窗
      Mycommont:null,//我的评论
      Mycollection:[],//收藏数据
      Mylikes:[],//喜欢数据
      Myhistory:[],//历史浏览
      token:window.localStorage.getItem("token"),
      // id:574,
      options: [
        [
          { name: '微信', icon: 'wechat' },
          { name: '朋友圈', icon: 'wechat-moments' },
          { name: '微博', icon: 'weibo' },
          { name: 'QQ', icon: 'qq' },
        ],
        [
          { name: '复制链接', icon: 'link' },
          { name: '海报', icon: 'poster' },
          { name: '二维码', icon: 'qrcode' },
          { name: '小程序码', icon: 'weapp-qrcode' },
        ],
      ],
    };
  },
    methods:{
        //分享组件
        onSelect(option) {
            if(option.name=="复制链接"){
              Toast.success(option.name+"成功");        
            }else{
              Toast.success("分享"+option.name+"成功");        
            }
            this.showShare = false;       
        },
        //跳转到个人
        tomy(item){
          let token = window.localStorage.getItem("token");
          if(!token){
           return
          }else if(item.name=='管理员404'){

            this.$router.push("/my")
          }
        },
        //微信分享
        wechat(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
          this.$toast.success('微信分享成功')
          }
        },
        //朋友圈
        pyq(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
          this.$toast.success('朋友圈已分享')
          }
        },
        // 微博
        weibo(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
          this.$toast.success('微博分享成功')
          }
        },
        // 保存到相册
        save(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
          this.$toast.success('已保存到相册')
          }
        },
        // 底部文章点赞
        Likeicon(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
            // 切换点赞状态 false为已点赞
          this.likess=!this.likess;
          if(!this.likess){
            //定义id
          let id=this.$route.query.id;
          //获取当前id所在数组的下标
          let index=this.Lists.findIndex((item)=>item.id==id);
          // 当前文章数据
          console.log(this.Lists[index]);
          //去重
          //寻找喜欢数据id是否与当前页面数据id相等 
          //找不到为-1表示喜欢数据中不存在当前页面数据 否则输出下标
          var con=this.Mylikes.findIndex(item=>item.id==this.Lists[index].id);
          console.log(con);
          // 如果找不到在添加 
            if(con == -1){
              // 把当前文章添加到我的喜欢数据中
              this.Mylikes.push(this.Lists[index])
              // 存入localstorage
              window.localStorage.setItem('likes',JSON.stringify([this.Mylikes]))
            }
            this.$toast("已点赞");
          }else{
             //定义id
            let id=this.$route.query.id;
            //获取当前id所在数组的下标
            let index=this.Mylikes.findIndex((item)=>item.id==id);
            console.log(index);
            // 取消收藏从数组中删除
            this.Mylikes.splice(index,1);
            // 重新存入localstorage覆盖旧数据
            window.localStorage.setItem('likes',JSON.stringify([this.Mylikes]))
            this.$toast("取消点赞")
          }
          }
        },
        //底部收藏
        Collection(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
            // 切换收藏状态 false为已收藏
            this.collection=!this.collection;
          if(!this.collection){
          //定义id
          let id=this.$route.query.id;
          //获取当前id所在数组的下标
          let index=this.Lists.findIndex((item)=>item.id==id);
          // 当前文章数据
          console.log(this.Lists[index]);
          //去重
          //寻找收藏数据id是否与当前页面数据id相等 
          //找不到为-1表示收藏数据中不存在当前页面数据
          var con=this.Mycollection.findIndex(item=>item.id==this.Lists[index].id);
          console.log(con);
          // 如果找不到在添加 
            if(con == -1){
              // 把当前文章添加到我的收藏数据中
              this.Mycollection.push(this.Lists[index])
              // 存入localstorage
              window.localStorage.setItem('my',JSON.stringify([this.Mycollection]))
            }
            this.$toast("已收藏");
          }else{
            //定义id
            let id=this.$route.query.id;
            //获取当前id所在数组的下标
            let index=this.Mycollection.findIndex((item)=>item.id==id);
            console.log(index);
            // 取消收藏从数组中删除
            this.Mycollection.splice(index,1);
            // 重新存入localstorage覆盖旧数据
            window.localStorage.setItem('my',JSON.stringify([this.Mycollection]))
            this.$toast("取消收藏")
          }
          }
          
        },
        //底部分享按钮
        comment1(){
        let token = window.localStorage.getItem("token");
          if(!token){
            // this.$router.push("/home");
            this.$router.push("/login")
          }else{
            this.showShare=true;
          }
        },
        //评论等功能跳转到登录 全部评论
        comment(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }else{
            this.$router.push("/commont");
          }
          
        },
        //写评论假盒子
        commentbox(){
          let token = window.localStorage.getItem("token");
          if(!token){
            this.$router.push("/login")
          }
          this.show = true;
          // $refs通过ref名为toplogo获取该元素自身高度 clientHeight
          console.log(this.$refs.toplogo.clientHeight);
       
          // $refs通过ref名为comment获取该元素距离顶部高度 offsetTop
          //滚动到该高度(X,Y)
          window.scrollTo(0,this.$refs.comment.offsetTop-this.$refs.toplogo.clientHeight)
        },
        //全部评论按钮
        to_commont(){
          this.$router.push("/commont");
        },
        //评论发送按钮
        send(){
          //$refs通过ref为text的元素获取该输入框的值
          let comvle=this.$refs.text.value;
         
          console.log(this.$refs.inp.offsetTop);
          window.scrollTo(0,this.$refs.inp.offsetTop)
          if(!comvle){
            return;
          }
          console.log(comvle);
          this.Commont.push({
            id:this.id+=1,
            name:"管理员404",
            img:"../assets/img/default_user_image.png",
            content:comvle,
            like:0,
            time:"刚刚",
            good:true
        
          })
          this.$refs.text.value="";
          window.localStorage.setItem("Commont",JSON.stringify([this.Commont]));
          console.log(JSON.parse( window.localStorage.getItem("Commont")));
          
          this.$toast.success("评论成功");
          this.show=false;
          
        },
        //评论功能
        commontadd(e){
          this.show = true;//评论盒子显示隐藏
          var vle=e.target.value;//输入框的值
          //滚动到评论区
          window.scrollTo(0,this.$refs.inp.offsetTop)
          if(!vle){
            return;
          }
          console.log(this.Commont[this.Commont.length-1].id+=1);
          //评论数据中最后一个数据中的id
          let end_id=this.Commont[this.Commont.length-1].id;
          this.Commont.push({
            id:end_id+=1,
            name:"管理员404",
            img:"../assets/img/default_user_image.png",
            content:vle,
            like:0,
            time:"刚刚",
            good:true
        
          })
          console.log(this.Commont);
          this.Mycommont.push({
            id:end_id+1,
            name:"管理员404",
            img:"../assets/img/default_user_image.png",
            content:vle,
            like:0,
            time:"刚刚",
            good:true
        
          })
          console.log(this.Mycommont);
          // 将新数据重新存入localstorage 覆盖旧数据
          window.localStorage.setItem("Commont",JSON.stringify([this.Commont]));
          window.localStorage.setItem("Mycommont",JSON.stringify(this.Mycommont));
          console.log(JSON.parse( window.localStorage.getItem("Commont")));
          
          this.$toast.success("评论成功");
          this.show=false;
          e.target.value="";
        },
        //评论点赞
        likes(item){
          let token = window.localStorage.getItem("token");
          // console.log(item);
          if(!token){
            this.$router.push("/login")
          }else{
            item.good=!item.good;
          if(item.good){
            item.like -=1;
            window.localStorage.setItem("Commont",JSON.stringify([this.Commont]));
          }else{
            item.like +=1;
            window.localStorage.setItem("Commont",JSON.stringify([this.Commont]));
          }
          }
          
         
        },
        //删除评论
        del(id){
          console.log(id);
          let index = this.Commont.findIndex(item=>item.id==id);
          console.log(index);
          let token = window.localStorage.getItem("token");
          if(!token){

            this.$router.push("/login")
          }else{
            Dialog.confirm({
            title: '确认要删除当前评论吗?',
          })
            //点击确认删除
            .then(() => {
           
              this.Commont.splice(index,1);
              this.$toast.fail("已删除");
              //存入评论区数据并覆盖
              window.localStorage.setItem("Commont",JSON.stringify([this.Commont]));
            })
            //取消
            .catch(() => {
              // on cancel
            });
          }
          
          
        },
      //接收数据
      getListsFun(){
        getLists({id:this.$route.query.id}).then(data=>{
          // console.log(data);
          //列表页数据
          this.Lists=data.data;
          this.Lists2=data.data2;
          //我的评论数据
          this.Mycommont=data.mycommont;
          //原始评论数据
          this.Commont=data.commontpage;
          //如果localStorage存在这个数据则使用最新评论数据
          if(window.localStorage.getItem("Commont")){
            this.Commont=JSON.parse( window.localStorage.getItem("Commont"))[0];
          }
          // 存在则替换收藏数据
          if(window.localStorage.getItem("my")){
            this.Mycollection=JSON.parse( window.localStorage.getItem("my"))[0];
            //当前文章id
            let id=this.$route.query.id;
            // console.log(id);
            //获取当前id所在数组的下标
            let index=this.Mycollection.findIndex((item)=>item.id==id);
            if(index==-1){
              this.collection=true;
            }else{
              this.collection=false;
            }
          }
          // 存在则替换收藏数据
          if(window.localStorage.getItem("likes")){
            this.Mylikes=JSON.parse( window.localStorage.getItem("likes"))[0];
            //当前文章id
            let id=this.$route.query.id;
            // console.log(id);
            //获取当前id所在数组的下标
            let index=this.Mylikes.findIndex((item)=>item.id==id);
            if(index==-1){
              this.likess=true;
            }else{
              this.likess=false;
            }
          }
          //定义id
          let id=this.$route.query.id;
          //获取当前id所在数组的下标
          let index=this.Lists.findIndex((item)=>item.id==id);
          // 当前页面数据
          this.detailspage=this.Lists[index];
        
          if(window.localStorage.getItem('myhistory')){
            this.Myhistory=JSON.parse( window.localStorage.getItem("myhistory"))[0];
          }
          console.log(this.detailspage);
          
        })
      },
      getImgFun(){
        getImg().then(data=>{
          // console.log(data);
          this.Img=data.image;
        })
      },
      getBannerFun(){
        getBanner().then(data=>{
          // console.log(data);
          this.Bannerimg=data.banner;
        })
      }
    },
    created(){
      this.getListsFun();
      this.getImgFun();
      this.getBannerFun();
    },
    updated(){
          //定义id
          let id=this.$route.query.id;
          //获取当前id所在数组的下标
          let index=this.Lists.findIndex((item)=>item.id==id);
          // 当前页面数据
          this.detailspage=this.Lists[index];
          //历史浏览中id是否与当前页面id相等
          var con=this.Myhistory.findIndex(item=>item.id==this.Lists[index].id);
          console.log(con);
            // 如果找不到在添加 ==-1为找不到此数据
            if(con == -1){
            // 把当前文章添加到我的收藏数据中
            this.Myhistory.push(this.detailspage);
            // 存入localstorage
            window.localStorage.setItem('myhistory',JSON.stringify([this.Myhistory]));
                
            }
          
    },
    mounted(){
      // window.onscroll=()=>{
      //   console.log(window.pageYOffset);
      // }
    }
}
</script>

<style lang="scss" scoped>

.details .box_foot,
        .details .comment {
  margin: 0 13px;
}
.details .box_foot>.titlebox,
        .details .comment>.titlebox {
  display: flex;
  margin-top: 20px;
  font-size: 15px;
  font-weight: bold;
}
.details .box_foot>.titlebox>.icon1,
        .details .comment>.titlebox>.icon1 {
        width: 20px;
        height: 20px;
        margin-right: 5px;
}
.details{
  .van-share-sheet ::v-deep .van-share-sheet__options{
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
  }
  .commontbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    // padding: 20px;
    textarea{
      border: 0;
      background-color: #f1f1f1;
      border-radius: 15px;
      padding: 20px;
      width: 80%;
      height: 30%;
      resize: none;
      font-size: 14px;
      font-weight: bold;
    }
    .send{
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 15px;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
      width: 80%;
      padding: 15px 20px;
      margin-top: 20px;
      height: 5%;
      background: rgb(29, 153, 229);
    }
  }
} 
.details {
    
  .box_foot {
    ul {
      li {
        margin-top: 20px;
        padding-bottom: 15px;
        border-bottom:1px solid #ccc ;
        display: flex;
        justify-content: space-between;
        .titlebox {
          margin-right: 20px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .title {
            font-weight: bold;
            margin-bottom: 16px;
            font-size: 15px;
          }
          .subtitle {
            display: flex;
            align-items: center;
            margin-left: -2px;
            z-index: -20;
            div{
              color: #747474;
              font-weight: bold;
              font-size: 12px;
              transform: scale(0.9);
              margin-left: -1px;
              &.con {
                border: 1px solid red;
                border-radius: 5px;
                color: red;
                font-size: 12px;
                font-weight: bold;
                padding: 2px;
              
              }
            }
          }
        }
        .imgbox {
          flex: 0.6;
          border-radius: 6px;
          overflow: hidden;
        }
      }
    }
  }
  .toplogo {
    height: 40px;
    margin-bottom: 40px;
    padding: 0 13px 0 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: #fff;
    .left {
      width: 7.5%;
      height: 40px;
      line-height: 40px;
      font-size: 28px;
      
    }
    
  }
  .newstitle {
    margin: 0 13px;
    margin-bottom: 30px;
    font-size: 22px;
    font-weight: bold;
    letter-spacing: 2px;
  }
  .sublittle {
    margin: 0 13px;
    color: #7e7e7e;
    font-weight: bold;
    margin-bottom: 13px;
    font-size: 12px;
    
    .top {
      display: flex;
      align-items: center;
      span {
        margin: 0 5px;
      }
      .ticket {
        width: 30px;
        height: 18px;
        text-align: center;
        background-color: #eea355;
        border-radius: 3px;
        color: #fff;
      }
    }
  }
  .more {
    margin: 0 13px;
    padding: 0 13px;
    height: 50px;
    background-color: #f9f9f9;
    color: #7e7e7e;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    font-size: 12px;
    p {
      span {
        color: #d95546;
      }
    }
    .morebox {
      width: 60px;
      height: 26px;
      border-radius: 4px;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
      line-height: 26px;
      text-align: center;
      background-color: #d95546;
    }
  }
  .content {
    margin: 0 13px;
    p {
      font-size: 15px;
      color: #535353;
    }
    ul {
      margin-top: 96px;
      margin-bottom: 25px;
      padding: 0 40px;
      display: flex;
      justify-content: space-between;
      li {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-image: linear-gradient(#fefefe,#f8f8f8 50%);
        text-align: center;
        line-height: 40px;
        font-size: 26px;
      }
    }
    .imgbox {
      margin-bottom: 10px;
    }
    .editor {
      float: right;
      margin-top: 20px;
      margin-bottom: 40px;
      color: #646464;
      font-size: 12px;
    }
  }
  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
  }
  .linebox {
    height: 7px;
    width: 100%;
    background-color: #f7f7f7;
  }
  .pagebtm {
    height: 50px;
    padding: 0 13px;
    background-color: #fff;
    box-shadow: 0px 0px 12px 1px #ccc;
    display: flex;
    align-items: center;
    position: sticky;
    bottom: 0;
    .icon-inp {
      width: 13.3%;
      // height: 20px;
      font-size: 20px;
      text-align: center;
    }
    .inp {
      flex: 1;
      border-radius: 15px;
      background-color: #f1f1f1;
      height: 30px;
      margin-right: 2.1%;
      padding: 0 4.5%;
      font-size: 12px;
      color: #999;
      font-weight: bold;
      line-height: 30px;
      outline: none;
      border: 0;
    }
  }
  .usercom {
    margin: 0 13px;
    padding-bottom: 40px;
    .userbox {
      margin: 13px 0;
      .top {
        height: 32px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .right {
          display: flex;
          font-size: 12px;
          align-items: center;   
          .like {
            font-size: 20px;
            margin-left: 5px;
           
          }
        }
      }
      .userimg {
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      .btm {
        .reply {
          display: flex;
          font-size: 12px;
          color: #aeaeae;
          .time {
            margin-right: 15px;
          }
          .replybox {
            width: 35px;
            height: 15px;
            padding: 1px;
            text-align: center;
            line-height: 15px;
            border-radius: 5px;
            background-color: #f6f6f6;
            color: #d95546;
          }
        }
        .usercomment {
          font-size: 14px;
        }
      }
      .user {
        font-size: 12px;
        display: flex;
        align-items: center;
      }
    }
    .allcom {
      width: 100%;
      height: 40px;
      background-color: #f1f1f1;
      border-radius: 17px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      line-height: 40px;
      color: #636363;
    }
  }
}

</style>
